<template>
  <div class="w-full h-full">
    <div class="w-full h-full ">
      <div class="w-full h-full flex flex-row justify-between">
        <div class="w-1/2 h-full flex flex-col items-center">
          <div
            ref="pieBarLeft"
            class="w-5/6 h-5/6 text-white"
          />
          <p class="pt-2 text-base">年龄占比</p>

        </div>
        <div class="w-1/2 h-full flex flex-col items-center">
          <div
            ref="pieBarRight"
            class="w-5/6 h-5/6"
          />
          <p class="pt-2 text-base">性别占比</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
  barDataL: {
    type: Array,
    default: () => []
  },
  barDataR: {
    type: Array,
    default: () => []
  }
})

const pieBarLeft = ref(null)
const pieBarRight = ref(null)

onMounted(
  () => {
    initBarLeft()
    initBarRight()
  }
)

import { onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'

const initBarLeft = () => {
  // 引入图表
  var chartDomL = pieBarLeft.value
  var myChartL = echarts.init(chartDomL)
  var options
  const label = [] // 遍历props.bardataL将其username放进来
  props.barDataL.forEach(item => {
    label.push(item.name)
  })
  options = {
    tooltip: {
      trigger: 'item'
    },
    // backgroundColor: 'rgba(255, 255, 255, 0)',
    legend: {
      type: 'scroll',
      orient: 'horizontal',
      right: -6,
      top: 0,
      data: label,
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: '#ffffff'
      },
      pageTextStyle: {
        color: '#ffffff'
      },
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '56%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'left',
        },
        labelLine: {
          show: false
        },
        data: props.barDataL
      }
    ]
  }
  options && myChartL.setOption(options)
}

const initBarRight = () => {
  // 引入图表
  var chartDomR = pieBarRight.value
  var myChartR = echarts.init(chartDomR)
  var options

  options = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'horizontal',
      top: '0%',
      left: 'center',
      itemWidth: 10, // 设置大小
      itemHeight: 10,
      textStyle: {
        color: '#ffffff'
      },
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '56%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 12,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: props.barDataR
      }
    ]
  }
  options && myChartR.setOption(options)
}

</script>

<style scoped lang="scss"></style>
